<template>
  <div>
    <el-card style="width: 1000px; margin: auto; margin-top: 20px">
      <el-container>
        <el-header class="tabletitle">
          <span>项目销售浮动金额申报信息管理</span>
          <el-button-group style="margin-left: 15px">
            <el-button @click="add" type="primary" icon="el-icon-plus"
              >新增
            </el-button>
          </el-button-group>
          <el-input
            style="width: 400px; float: right"
            placeholder="请输入"
            v-model="search"
            class="input-with-select"
          >
            <el-select
              v-model="type"
              slot="prepend"
              placeholder="请选择"
              style="width: 110px"
              type="primary"
            >
              <el-option label="项目名称" value="1"></el-option>
              <el-option label="项目编号" value="2"></el-option>
            </el-select>
            <el-button
              slot="append"
              icon="el-icon-search"
              type="primary"
              @click="searchproject()"
            ></el-button>
          </el-input>
        </el-header>

        <el-main>
          <el-table
            :data="tableData"
            style="width: 100%"
            border
            :row-class-name="tableRowClassName"
            :default-sort="{ prop: 'date', order: 'descending' }"
            :header-cell-style="{ background: '#409EFF', color: '#ffffff' }"
            @row-click="getdetail"
          >
            <el-table-column prop="sn" label="项目编号" width="120">
            </el-table-column>
            <el-table-column prop="name" label="项目名称"> </el-table-column>

            <el-table-column prop="username" label="负责人" width="70">
            </el-table-column>

            <el-table-column
              prop="created_time"
              label="申报时间"
              width="170"
              sortable
            ></el-table-column>

            <el-table-column prop="status" label="状态" width="70">
              <template slot-scope="{ row }">
                {{
                  row.status == "0"
                    ? "未发起"
                    : row.status == "1"
                    ? "审批中"
                    : row.status == "2"
                    ? "已通过"
                    : "已拒绝"
                }}
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-card>

    <award-input
      ref="awardinput"
      :form="form"
      :detailtableform="detailtableform"
    ></award-input>
  </div>
</template>

<script>
import AwardInput from "./AwardInput.vue";
export default {
  components: { AwardInput },

  created() {
    this.getprojectlist();
  },

  data() {
    return {
      type: "项目名称",
      search: "",
      form: {},
      detailtableform: [],
      tableData: [],
    };
  },

  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (row.status === 1) {
        return "onflow-row";
      } else if (row.status === 2) {
        return "success-row";
      } else if (row.status === 3) {
        return "fail-row";
      }
      return "";
    },

    add() {
      this.$refs.awardinput.infocardshow = true;
      this.form = {},
      this.detailtableform = [],
      this.$refs.awardinput.infocardshow = true;
      this.$refs.awardinput.isadd = true;
      this.$refs.awardinput.status = true;
    },

    async getdetail(row) {
      let id = row.id;
      try {
        let res = await this.$axios.get(`api/award/getdetail?id=` + id);

        this.form = res.data.projectinfo[0];
        this.detailtableform = res.data.detail;
        this.form.username = res.data.username;
        this.$refs.awardinput.infocardshow = true;
        this.$refs.awardinput.isadd = false;
        this.$refs.awardinput.status = false;
        this.$refs.awardinput.projectid = id;
        // this.$refs.rsu2.postvalue
        // this.$refs.rsu.setuser(this.form.userid);
      } catch (e) {}
    },

    getprojectlist() {
      const loading = this.$loading({
        lock: true,
        text: "正在准备数据",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      if (sessionStorage.getItem("id") != null) {
        let datas = {
          id: sessionStorage.getItem("id"),
        };
        this.$axios
          .post("api/award/getprojectlist", datas)
          .then((response) => {
            this.tableData = response.data;
          })
          .catch(function (error) {
            console.log(error);
          });

        loading.close();

        return;
      } else {
        setTimeout(() => {
          this.getprojectlist();
        }, 100);
      }
    },


    searchproject() {
        let datas = {
          id: sessionStorage.getItem("id"),
          type:this.type,
          content:this.search,
        };
        console.log(datas)
        this.$axios
          .post("api/award/searchproject", datas)
          .then((response) => {
            this.tableData = response.data;
          })
          .catch(function (error) {
            console.log(error);
          });
  
    },
  },
};
</script>

<style>
.el-table .fail-row {
  background: rgba(255, 208, 208, 0.25);
}

.el-table .onflow-row {
  background: rgba(197, 232, 252, 0.25);
}

.el-table .success-row {
  background: rgba(211, 255, 226, 0.25);
}
.tabletitle {
  max-height: 30px;
  font-size: 25px;
  color: #409eff;
}
</style>